<template>
	<view class="mask">
		<u-popup v-model="regBool"  mode="center" :mask-close-able="false">
			<view class="mwrap">
				<image class="rules" @click="watchRules" mode="widthFix" :src="imgPath+'/static/img/btn_1.png'"></image>
				<image class="renge" mode="widthFix" :src="imgPath+'/static/big/challengeList.png'"></image>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="content">
					<view class="item" v-for="(item,index) in taskList">
						<image class="xuhao" mode="widthFix" :src="imgPath+'/static/big/teamCenter/workList/0'+(index+1)+'.png'"></image>
						<image class="itemList" mode="widthFix" :src="imgPath+'/static/big/teamCenter/workList/work_'+item.id+'.png'"></image>
					</view>
				</scroll-view>
				<image class="slide updown" mode="widthFix" :src="imgPath+'/static/slide.png'"></image>
				<image class="confirm" @click="confirm" mode="widthFix" :src="imgPath+'/static/big/zudui.png'"></image>
				<image class="cancel" @click="cancel" mode="widthFix" :src="imgPath+'/static/close.png'"></image>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name:"ChallengeList",
		data() {
			return {
				regBool:false,
				taskList:[]
			}
		},
		methods:{
			confirm(){
				this.regBool = false;
				this.$emit('success');
			},
			cancel(){
				this.regBool = false
				this.$emit('cancel');
			},
			watchRules(){
				//规则弹窗
				this.regBool = false
				this.$emit('viewRules');
			},
			show(taskList){
				this.taskList = taskList;
				if(taskList.length==0){
					this.$u.toast('任务获取失败，请重新打开！');
				}
				this.$nextTick(()=>{
					this.regBool = true;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

.mwrap{
	width: 750rpx;
	height: 1400rpx;
	display: flex;
	justify-content: center;
	position: relative;
	.renge{
		position: relative;
		width: 646rpx;
	}
	.rules{
		position: absolute;
    z-index: 666;
    width: 82rpx;
    right: 73rpx;
    top: 302rpx;
	}
	.content{
		position: absolute;
    top: 383rpx;
    width: 461rpx;
		height: 715rpx;
    overflow: auto;
		.item{
			position: relative;
			height: 120rpx;
			.xuhao{
				width: 48rpx;
				color: #333;
				font-weight: bold;
				position: absolute;
				z-index: 3;
				top: 14rpx;
				left: 0rpx;
			}
			.itemList{
				width: 420rpx;
				position: absolute;
				top: 0rpx;
				left: 25rpx;
			}
		}
	}
	.slide{
		position: absolute;
    z-index: 666;
    width: 77rpx;
    left: 345rpx;
    bottom: 264rpx;
	}
	.confirm{
		position: absolute;
    z-index: 666;
    width: 260rpx;
    left: 244rpx;
    border-radius: 33rpx;
    bottom: 122rpx;
	}
	.cancel{
		position: absolute;
    z-index: 666;
    width: 80rpx;
    left: 339rpx;
    border-radius: 35rpx;
    bottom: 18rpx;
	}
}

</style>